<template>
  <div class="role">
    <div class="top-control mb-primary">
      <el-button type="primary" :icon="useRenderIcon(plus)" @click="add"
        >新增</el-button
      >
    </div>
    <div class="my-table mt-primary">
      <el-table
        :data="tableData"
        style="width: 100%"
        v-loading="listLoading"
        stripe
        border
      >
        <el-table-column type="index" width="55" align="center" />
        <el-table-column label="图片" align="center" prop="createTime">
          <template v-slot="scope">
            <div class="flex justify-center">
              <img :src="scope.row.imgUrl" alt="" class="h-[150px] w-auto" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150">
          <template v-slot="scope">
            <el-button
              type="primary"
              :icon="useRenderIcon(iconDel)"
              size="small"
              @click="del(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 添加编辑弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      title="新增轮播图"
      width="650px"
      @closed="closed"
    >
      <div class="dialog-content flex items-center justify-center">
        <el-upload
          class="avatar-uploader"
          action="#"
          :show-file-list="false"
          :http-request="httpRequest"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submit" :loading="isLoading">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { Plus } from "@element-plus/icons-vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import plus from "@iconify-icons/ep/plus";
import iconDel from "@iconify-icons/ep/delete";
import { ref } from "vue";
import { addBaaner, delBaaner, getBaaner } from "@/api/system/index";
import { ElMessage, ElMessageBox, UploadRequestOptions } from "element-plus";
import type { Baaner } from "@/api/system/system";
import { onMounted } from "vue";
import { upload } from "@/utils/oss";
defineOptions({
  name: "baaner"
});
onMounted(() => {
  getList();
});
const tableData = ref<Baaner[]>([]);
const listLoading = ref(false);
const getList = async () => {
  listLoading.value = true;
  const res = await getBaaner();
  if (res.code === 200) {
    tableData.value = res.rows;
    listLoading.value = false;
  }
};
const imageUrl = ref("");
const httpRequest = async (options: UploadRequestOptions) => {
  const res = await upload(options.file, "shop");
  imageUrl.value = res;
  return Promise.resolve(res);
};
// 添加
const add = () => {
  dialogVisible.value = true;
};
// 删除
const del = (item: Baaner) => {
  ElMessageBox.confirm("您确定要删除吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async () => {
    const res = await delBaaner(item.id);
    if (res.code === 200) {
      ElMessage({
        type: "success",
        message: "删除成功"
      });
      getList();
    }
  });
};
// 弹窗
const dialogVisible = ref(false);
const closed = () => {
  imageUrl.value = "";
};
// 添加提交
const addSubmit = async () => {
  if (!imageUrl.value) {
    ElMessage.error("请选择图片");
    return;
  }
  const res = await addBaaner({ imgUrl: imageUrl.value });
  return res;
};
// 提交
const isLoading = ref(false);
const submit = async () => {
  isLoading.value = true;
  const res = await addSubmit();
  isLoading.value = false;
  if (res.code === 200) {
    ElMessage.success("添加成功");
    dialogVisible.value = false;
    getList();
  }
};
</script>
<style lang="scss">
.avatar-uploader .el-upload {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  width: 178px;
  height: 178px;
  font-size: 28px;
  color: #8c939d;
  text-align: center;
}
</style>
